<template>
  <div class="app-icon" @contextmenu.prevent="showMenu">
    <a-popover trigger="hover">
      <template #content>
        <p v-if="description">{{ description }}</p>
        <p v-if="!description">空空如也</p>
      </template>
      <a-avatar
        shape="square"
        :size="64"
        @click="openUrl"
        :src="icon"
        class="icon"
      >
        {{ name.slice(0, 4) }}
      </a-avatar>
    </a-popover>

    <span class="label">{{ name }}</span>

    <div
      v-if="menuVisible"
      class="context-menu"
      :style="{ top: `${menuY}px`, left: `${menuX}px` }"
    >
      <div class="menu_item" @click.stop="edit">
        <a-flex gap="small">
          <EditOutlined />
          <div>编辑</div>
        </a-flex>
      </div>
      <div class="menu_item" @click.stop="showDeleteConfirm">
        <a-flex gap="small">
          <DeleteOutlined />
          <div>删除</div>
        </a-flex>
      </div>
      <div class="menu_item" @click.stop="share_url">
        <a-flex gap="small">
          <ShareAltOutlined />
          <div>分享</div>
        </a-flex>
      </div>
    </div>

    <a-modal
      v-model:open="shareVisible"
      @ok="share_urlOK"
      style="width: fit-content"
    >
      <template #footer> </template>
      <a-flex horizontal align="center" justify="center" gap="middle">
        <a-qrcode :value="url" />
        <a-space direction="vertical" align="start">
          <a-input :value="url" placeholder="-" :maxlength="60" readonly />
          <a-button type="primary" @click="copyToClipboard"
            >复制到剪贴板</a-button
          >
        </a-space>
      </a-flex>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { message } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
  EditOutlined,
  DeleteOutlined,
  ShareAltOutlined,
} from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal } from "ant-design-vue";

const props = defineProps({
  url: String,
  icon: String,
  name: String,
  description: String,
});

const emit = defineEmits(["edit", "delete"]);

const menuVisible = ref(false);
const shareVisible = ref(false);
const menuX = ref(0);
const menuY = ref(0);

const openUrl = () => {
  let formattedUrl = props.url;

  // 检查网址是否以 http:// 或 https:// 开头
  if (!/^https?:\/\//i.test(formattedUrl)) {
    formattedUrl = `http://${formattedUrl}`; // 默认添加 http://
  }

  window.open(formattedUrl, "_blank");
};

const edit = () => {
  emit("edit");
  hideMenu();
};

const share_url = () => {
  shareVisible.value = true; // 显示分享对话框
  hideMenu();
};

const share_urlOK = () => {
  shareVisible.value = false; // 关闭分享对话框
};

const copyToClipboard = () => {
  navigator.clipboard
    .writeText(props.url)
    .then(() => {
      message.success("已复制到剪贴板！");
    })
    .catch((err) => {
      message.error("复制失败！");
      console.error("Error copying text: ", err);
    });
};

const showDeleteConfirm = () => {
  Modal.confirm({
    title: "您确定要删除此链接吗？",
    icon: createVNode(ExclamationCircleOutlined),
    okText: "确定",
    okType: "danger",
    cancelText: "取消",
    onOk: () => {
      emit("delete");
      hideMenu();
      message.success("删除成功");
    },
    onCancel() {
      message.info("取消");
    },
  });
};

const showMenu = (event) => {
  menuX.value = event.clientX + 5;
  menuY.value = event.clientY + 5;

  const menuWidth = 100;
  const menuHeight = 60;
  if (menuX.value + menuWidth > window.innerWidth) {
    menuX.value = window.innerWidth - menuWidth;
  }
  if (menuY.value + menuHeight > window.innerHeight) {
    menuY.value = window.innerHeight - menuHeight;
  }

  menuVisible.value = true;
};

const hideMenu = () => {
  menuVisible.value = false;
};

// 添加全局点击事件监听
const handleClick = () => hideMenu();

onMounted(() => {
  window.addEventListener("click", handleClick);
});

onBeforeUnmount(() => {
  window.removeEventListener("click", handleClick);
});
</script>

<style scoped>
.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative; /* 让删除按钮和右键菜单绝对定位 */
}

.icon {
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.label {
  margin-top: 5px;
}

.context-menu {
  padding: 4px;
  backdrop-filter: blur(10px) contrast(1.2) brightness(1.2);
  color: rgba(0, 0, 0, 0.8);
  position: fixed;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(204, 204, 204, 0.3);
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.menu_item {
  padding: 8px;
  cursor: pointer;
}

.menu_item:hover {
  background-color: rgba(0, 0, 0, 0.1); /* 悬停高亮 */
  border-radius: 8px;
}
</style>
